<canvas id="myCanvas" width="1920/4" height="1080/4" style="border: 1px solid black;"></canvas>
<p id="scoreDisplay">分数: 0</p>
<script>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');

    var score = 0;

    var spheres = [];
    for (var i = 0; i < 100; i++) {
        spheres.push({
            x: Math.random() * canvas.width,
            y: Math.random() * canvas.height,
            z: Math.random() * 100,
            radius: 20,
            speed: 2,
        });
    }

    var rectangle = {
        width: 120,
        height: 20,
        x: 0,
        y: 0,
    };

    function drawSpheres() {
        spheres.forEach(function(sphere) {
            ctx.beginPath();
            ctx.arc(sphere.x, sphere.y, sphere.radius * (100 / (100 + sphere.z)), 0, 2 * Math.PI);
            ctx.fillStyle = 'blue';
            ctx.fill();
            ctx.stroke();
        });
    }

    function drawRectangle() {
        ctx.beginPath();
        ctx.rect(rectangle.x, rectangle.y, rectangle.width, rectangle.height);
        ctx.fillStyle = 'red';
        ctx.fill();
        ctx.stroke();
    }

    function checkCollision() {
        spheres.forEach(function(sphere, index) {
            var dx = sphere.x - Math.max(rectangle.x, Math.min(sphere.x, rectangle.x + rectangle.width));
            var dy = sphere.y - Math.max(rectangle.y, Math.min(sphere.y, rectangle.y + rectangle.height));
            var distance = Math.sqrt(dx * dx + dy * dy);

            if (distance < sphere.radius * (100 / (100 + sphere.z))) {
                score += 1;
                document.getElementById('scoreDisplay').innerText = '分数: ' + score;
                resetSphere(index);
            }
            if(sphere.y > canvas.height)
            {
                resetSphere(index)
            }
        });
    }

    function resetSphere(index) {
        spheres[index].x = Math.random() * canvas.width;
        spheres[index].y = 0;
        spheres[index].z = Math.random() * 100;
    }

    function update() {
        spheres.forEach(function(sphere) {
            sphere.y += sphere.speed;
        });

        ctx.clearRect(0, 0, canvas.width, canvas.height);

        drawSpheres();
        drawRectangle();
        checkCollision();

        requestAnimationFrame(update);
    }

    canvas.addEventListener('mousemove', function (evt) {
        var rect = canvas.getBoundingClientRect();
        rectangle.x = evt.clientX - rect.left - rectangle.width / 2;
        rectangle.y = evt.clientY - rect.top - rectangle.height / 2;
    });

    update();
</script>